<!--
 * @FileDescription 判断框
 * @Author lz
 * @Date 20230131 15:15:55
 * @LastEditors lz
 * @LastEditTime 20230131 15:15:55
-->
<template>
    <div class="contentBox">
        <div class="ask_box ask">
            <div class="tit">
                主考官
            </div>
            <div class="content">
                <div class="textscroll">
                    {{ props.Questions }}
                </div> 
        </div>
    </div>
    <!-- <div class="correct Btn" :class="state.RightAndWrong == 1 ? 'ChickOut' : ''" @click="choice(1)">正确</div>
        <div class="error Btn" :class="state.RightAndWrong == 2 ? 'ChickOut' : ''" @click="choice(2)">错误</div> -->
        <div class="correct Btn" :class="state.RightAndWrong == 'true' ? 'ChickOut' : ''" @click=choice(right)>正确</div>
        <div class="error Btn" :class="state.RightAndWrong == 'false' ? 'ChickOut' : ''" @click=choice(unright)>错误</div>

        <!-- <div class="content">
                                    <div class="txt">{{ props.Questions }}</div>
                                    <div class="correct Btn" :class="state.RightAndWrong == 1 ? 'ChickOut' : ''" @click="choice(1)">正确</div>
                                    <div class="error Btn" :class="state.RightAndWrong == 2 ? 'ChickOut' : ''" @click="choice(2)">错误</div>
                                </div> -->
        <div class="submit Btn" @click="submit()">
            提交
        </div>
        <!-- v-if="simulationData.Default.trainingDatalist.value[simulationData.Default.subscript.value].IsSubmit == false && HomeContent.Default.ApplicationType.value == '训练'" -->
    </div>
</template>

<script setup lang="ts">

import { log } from 'console';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, watch } from 'vue'
import HomeContent from '../../HomeContent';
import simulationData from '../simulationTraining';
interface Props {
    Answer: any;
    Questions: any;
}
const props = defineProps<Props>();
const emit = defineEmits(["doSth"]);
const state = reactive({
    // RightAndWrong: 0,
    RightAndWrong: '',
});
const right = ref('true')
const unright = ref('false')

// function choice(val: number) {
//     state.RightAndWrong = val
// }
function choice(val: string) {
    state.RightAndWrong = val
}
// 触发提交
function submit() {
    conArr()
    // if (state.RightAndWrong == 1) {
    //     if (props.Answer == 'true') {
    //         emit('doSth', true);

    //     } else if (props.Answer == 'false') {
    //         emit('doSth', false);

    //     }
    // } if (state.RightAndWrong == 2) {
    //     if (props.Answer == 'true') {
    //         emit('doSth', false);

    //     } else if (props.Answer == 'false') {
    //         emit('doSth', true);

    //     }
    // }
    if (state.RightAndWrong == props.Answer) {
        emit('doSth', true);

    } else {
        emit('doSth', false);
    }

}
// 存贮题目信息
let conArrlist: Array<any> = []
function conArr() {
    conArrlist = []
    conArrlist.push({ types: state.RightAndWrong })
    simulationData.Default.historyList.set(simulationData.Default.subscript.value, conArrlist)
}

//监听题目切换
watch(() => simulationData.Default.subscript.value, (newVal, oldVal) => {
    // state.RightAndWrong = 0
    state.RightAndWrong = ''

    if (newVal != oldVal) {
        if (simulationData.Default.trainingDatalist.value[simulationData.Default.subscript.value].IsSubmit) {
            Echo = simulationData.Default.historyList.get(simulationData.Default.subscript.value)
            state.RightAndWrong = Echo[0].types
        }
    }
})

let Echo: any = []
onMounted(() => {
    // state.RightAndWrong = 0
    state.RightAndWrong = ''

    if (simulationData.Default.trainingDatalist.value[simulationData.Default.subscript.value].IsSubmit) {
        Echo = simulationData.Default.historyList.get(simulationData.Default.subscript.value)
        state.RightAndWrong = Echo[0].types
    }
});
</script>

<style scoped>
/* .content {
    position: absolute;
    top: 80px;
    left: 360px;
    width: 600px;
    height: 311px;
    background-image: url('/structure/judge_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 40px;
    padding-top: 30px;
} */

.txt {
    font-size: 22px;
    font-weight: bold;
    color: #FFFFFF;
    height: 220px;
    overflow-y: auto;
}

.txt::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.txt::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #45B5FF;
}

.txt::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #123965;
}


.ask_box {
    position: absolute;
    right: 0;
    width: 400px;
    height: 240px;
    background-image: url('/structure/prompt_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.ask {
    top: 100px;
}

.tit {
    color: #31F8FF;
    font-size: 28px;
    padding: 10px;
    padding-left: 20px;
    padding-bottom: 0;
    font-family: PangMenZhengDao;
}

/* .content {
    font-size: 16px;
    padding: 20px;
    padding-top: 0;
    height: 110px;
    overflow-y: auto;
    color: #fff;
}

.content::-webkit-scrollbar {
    display: none;
} */

.content {
    font-size: 16px; 
    padding: 0 20px; 
    /* padding: 20px; */
    /* padding-top: 0; */
    /* height: 110px; */
    height: 151px;
    /* overflow-y: auto; */
    color: #fff;
}
.textscroll {
    overflow-y: auto;
    height: 151px;
}
.textscroll::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.textscroll::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #45B5FF;
}

.textscroll::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #123965;
}


.Btn {
    position: absolute;
    font-size: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 54px;
    width: 120px;
    height: 54px;
    background-image: url('/structure/btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.Btn:hover {
    color: #18ECFF;
    background-image: url('/structure/btn_bg_select.png');
}

.ChickOut {
    color: #18ECFF;
    background-image: url('/structure/btn_bg_select.png');
}

.correct {
    right: 240px;
    top: 340px;
}

.error {
    right: 40px;
    top: 340px;
}

.submit {
    left: 888px;
    bottom: 90px;
}
</style>